<template>
  <view class="components-message">
    <tm-dialog
        v-model="show"
        :content="content"
        :title="title"
        :theme="theme"
        :showCancel="showCancel"
        :confirmColor="confirmColor"
        :cancelColor="cancelColor"
        :bottom-border="bottomBorder"
        :confirmText="confirmText"
        :cancelText="cancelText"
        :over-close="overClose"
        @cancel="handleClose"
        @confirm="handleBtn">
    </tm-dialog>
  </view>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
export default {
  name: "globalDialog",
  // 组件模板
  components: {},
  data() {
    // 这里存放数据
    return {
      // // showModel: false,//是否显示
      // black: false, // 暗黑模式
      // bottomBorder: false, // 是否显示标题底部边线
      // // title: '提示',//标题
      // content: "",//内容
      // showCancel: false, //是否显示取消按钮
      // confirmText: '确认', //确认文字
      // cancelText: '取消',//取消文字
      // overClose: true, //是否允许点击遮罩关闭Modal
    };
  },

  // 监听属性 类似于data概念
  computed: {
    //是否显示
    show: {
      get() {
        return this.$promptStore.state.show
      },
      set(v) {}
    },
    //标题
    title() {
      return this.$promptStore.state.title;
    },
    //内容
    content() {
      return this.$promptStore.state.content;
    },
    // 暗黑模式
    black() {
      return this.$promptStore.state.black;
    },
    // 是否显示标题底部边线
    bottomBorder() {
      return this.$promptStore.state.bottomBorder
    },
    // merge合并按钮，split分割按钮
    theme() {
      return this.$promptStore.state.theme
    },
    //是否显示取消按钮
    showCancel() {
      return this.$promptStore.state.showCancel
    },
    //确认文字
    confirmText() {
      return this.$promptStore.state.confirmText
    },
    //确认按钮颜色
    confirmColor() {
      return this.$promptStore.state.confirmColor
    },
    //取消文字
    cancelText() {
      return this.$promptStore.state.cancelText
    },
    //取消按钮颜色
    cancelColor() {
      return this.$promptStore.state.cancelColor
    },
    //是否允许点击遮罩关闭Modal
    overClose() {
      return this.$promptStore.state.overClose
    },

  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {
  },
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {
  },
  // 方法集合
  methods: {
    handleClose() {
      this.$promptStore.commit('hidePrompt')
    },
    handleBtn() {
      this.$promptStore.commit('hidePrompt')
      this.$promptStore.commit('success')
    },
  },
  onHide() {
  }, // 生命周期 - 监听页面隐藏
  onUnload() {
  }, // 生命周期 - 监听页面卸载
};
</script>
<style lang='scss'>
</style>
